<template>
  <h1>2019 GDP Top 5</h1>
  <div class="container">
    <Bar1 :gdp="gdp" />
    <Bar2 :gdp="gdp" />
  </div>
  <div class="controls">
    <div class="item" v-for="item in gdp" :key="item.country">
      <label>{{ item.country }}</label>
      <input type="number" step="0.001" min="0" v-model="item.value" />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import Bar1 from "./components/Bar1.vue";
import Bar2 from "./components/Bar2.vue";
export default {
  components: {
    Bar1,
    Bar2,
  },
  // 不要把setup函数写成异步的,即async setup() {},老师说这样会出问题
  // 但是有一个api没讲(suspence,讲课的时候这个api还不成熟,所以没讲),和这个api配合时,可以写成异步的
  setup() {
    const gdp = ref([]);
    async function fetchGdp() {
      gdp.value = await fetch("/api/gdp.json").then((resp) => resp.json());
    }
    fetchGdp();
    return {
      gdp,
    };
  },
  async created() {},
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.controls {
  margin: 1em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.item {
  margin: 1em;
}
.item label {
  margin: 0 1em;
}
.item input {
  height: 26px;
  font-size: 14px;
}
h1 {
  text-align: center;
}
</style>

